@charset "utf-8";
@component-namespace t {
  @b table {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--border-radius-normal);
    position: relative;
    @e head {
      table-layout: fixed;
      width: 100%;
      & thead tr {
        & th {
          color: var(--table-head-th-color);
        }
      }
    }
    @e body {
      table-layout: fixed;
      width: 100%;
      & tbody tr {
        border-bottom: var(--table-body-tr-bottom-border);
        border-left: var(--table-body-tr-left-border);
        border-right: var(--table-body-tr-right-border);
        background-color: var(--table-body-tr-background-color);
        & td {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &:last-child {
          border-bottom: var(--table-body-tr-tail-bottom-border);
        }
        &:hover {
          background-color: var(--color-extra-light-blue);
        }
      }
    }
    @e foot {
      table-layout: fixed;
    }
    @m mini {
      @e head-wrapper {
        position: absolute;
        height: var(--table-head-th-height-mini);
        width: 100%;
      }
      @e body-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
      }
      @e foot-wrapper {
        width: 100%;
      }
      & thead tr th {
        height: var(--table-head-th-height-mini);
        padding: var(--table-head-th-padding-mini);
        line-height: @height;
        font-size: var(--table-head-font-size-mini);
      }
      & tbody tr td {
        height: var(--table-body-td-height-mini);
        line-height: @height;
        padding: var(--table-body-td-padding-mini);
        font-size: var(--table-body-font-size-mini);
      }
    }
    @m small {
      @e head-wrapper {
        position: absolute;
        height: var(--table-head-th-height-mini);
        width: 100%;
      }
      @e body-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
      }
      & thead tr th {
        height: var(--table-head-th-height-small);
        padding: var(--table-head-th-padding-small);
        line-height: @height;
        font-size: var(--table-head-font-size-small);
      }
      & tbody tr td {
        height: var(--table-body-td-height-small);
        padding: var(--table-body-td-padding-small);
        line-height: @height;
        font-size: var(--table-body-font-size-small);
      }
    }
    @m normal {
      @e head-wrapper {
        position: absolute;
        height: var(--table-head-th-height-mini);
        width: 100%;
      }
      @e body-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
      }
      & thead tr th {
        height: var(--table-head-th-height-normal);
        padding: var(--table-head-th-padding-normal);
        line-height: @height;
        font-size: var(--table-head-font-size-normal);
      }
      & tbody tr td {
        height: var(--table-body-td-height-normal);
        padding: var(--table-body-td-padding-normal);
        line-height: @height;
        font-size: var(--table-body-font-size-normal);
      }
    }
    @m large {
      @e head-wrapper {
        position: absolute;
        height: var(--table-head-th-height-mini);
        width: 100%;
      }
      @e body-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
      }
      & thead tr th {
        height: var(--table-head-th-height-large);
        padding: var(--table-head-th-padding-large);
        line-height: @height;
        font-size: var(--table-head-font-size-large);
      }
      & tbody tr td {
        height: var(--table-body-td-height-large);
        line-height: @height;
        padding: var(--table-body-td-padding-large);
        font-size: var(--table-body-font-size-large);
      }
    }
    @m blue {
      & thead tr {
        border-top: var(--table-head-tr-top-border-blue);
        border-left: var(--table-head-tr-left-border-blue);
        border-right: var(--table-head-tr-right-border-blue);
        background-color: var(--table-head-tr-background-color-blue);
      }
    }
    @m extra-light-black {
      & thead tr {
        border-top: var(--table-head-tr-top-border-extra-light-black);
        border-left: var(--table-head-tr-left-border-extra-light-black);
        border-right: var(--table-head-tr-right-border-extra-light-black);
        background-color: var(--table-head-tr-background-color-extra-light-black);
      }
    }
    @m border {
      & tbody tr td {
        border-right: 0.05rem solid var(--table-body-td-border-color);
        &:last-child {
          border-right: none;
        }
      }
      @m blue {
        & thead tr th {
          border-right: 0.05rem solid var(--table-head-th-border-color-blue);
          &:last-child {
            border-right: none;
          }
        }
      }
      @m extra-light-black {
        & thead tr th {
          border-right: 0.05rem solid var(--table-head-th-border-color-extra-light-black);
          &:last-child {
            border-right: none;
          }
        }
      }
    }
    @m stripe {
      & tbody tr:nth-child(2n) {
        background: var(--table-body-tr-stripe-backgournd-color);
        &:hover {
          background-color: var(--color-extra-light-blue);
        }
      }
      @m blue {}
      @m extra-light-black {}
    }
  }
}